<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>1</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://malsup.github.io/jquery.form.js"></script>
<script type="text/javascript">
	function url_query(){
	 	var qs = location.search.substr(1), // 获取url中"?"符后的字串  
	     args = {}, // 保存参数数据的对象
		 items = qs.length ? qs.split("&") : [], // 取得每一个参数项,
		 item = null,
		 len = items.length;

		for(var i = 0; i < len; i++) {
		    var item = items[i].split("=");
		    var name = decodeURIComponent(item[0]),
		     value = decodeURIComponent(item[1]);
		    if(name) {
		       args[name] = value;
		    }
		}	
		console.log(args);
		return args; 
 	}
 	console.log(document.location.toString());
</script>
<script type="text/javascript">
	var wsServer = 'wss://mxmovie.top/wss';
	var websocket = new WebSocket(wsServer);
	websocket.onopen = function (evt) {
	    console.log("Connected to WebSocket server.");
	    var arr = {};
	    arr['id'] = url_query()['id'];
	    arr['type'] = 'init';
	    var init_message =  JSON.stringify(arr);
	    websocket.send(init_message);
	};

	websocket.onclose = function (evt) {
	    console.log("Disconnected");
	};

	websocket.onmessage = function (evt) {
		var message = JSON.parse(evt.data);
		$("button").after("<p>"+message.id+"："+message.content+"</p>");
		console.log(message);
	};

	websocket.onerror = function (evt, e) {
	    console.log('Error occured: ' + evt.data);
	};
</script>

<script type="text/javascript">
	function send(){
		var content = $("#text").val();
		var arr = {};
	    arr['id'] = url_query()['id'];
	    arr['type'] = 'say';
	    arr['content'] = content;
	    arr['to'] = url_query()['to'];
	    var say_message =  JSON.stringify(arr);
		websocket.send(say_message);
		$("#text").val('');
		$("#content").after("<p>"+arr['id']+"："+content+"</p>");
	}


</script>


<script type="text/javascript">
	function uploadPic() {
		// 上传设置
		var options = {
				// 规定把请求发送到那个URL
				url: "/index/index/upload",
				// 请求方式
				type: "post",
				// 服务器响应的数据类型
				dataType: "json",
				// 请求成功时执行的回调函数
				success: function(data, status, xhr) {
					if(data.code == 1){
						$("#content").after('<img style="width:300px;height:300px;" src="/uploads/'+data.imgurl+'" />')	
						var arr = {};
	    				arr['id'] = url_query()['id'];
	    				arr['type'] = 'say';
	    				arr['content'] = '<img style="width:300px;height:300px;" src="/uploads/'+data.imgurl+'" />';
	    				arr['to'] = url_query()['to'];
	    				var say_message =  JSON.stringify(arr);	
						websocket.send(say_message);

						var file = $("#file");
						file.val('');
					}else{
						alert(data.msg);
					}
				
				}
		};
		
		$("#jvForm").ajaxSubmit(options);
	}
</script>

</head>
<body>

	<textarea id='text' style="width: 500px;height: 500px;"></textarea>
	<form id="jvForm" method="post"
		enctype="multipart/form-data">
	<label for="file">Filename:</label>
	<input type="file" name="image" id="file" onchange="uploadPic()" /> 

	</form>
	<button onclick="send()">发送</button>
	<div id="content"><div>
</body>
</html>